<template>
  <div>
    <el-dialog
      width="70%"
      @closed="closeQuestionDialog"
      title="试题管理"
      :visible.sync="dialogVisible">
      <el-form :inline="true">
        <el-form-item>
          <el-select
            @change="changeQuestionType"
            v-model="queryParams.question_type"
            filterable
            clearable
            placeholder="试题类型">
            <el-option
              v-for="item in questionTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="addQuestion" icon="el-icon-plus">题库导入</el-button>
        </el-form-item>

        <!--<el-form-item>-->
          <!--<el-button type="primary" icon="el-icon-upload2">导出</el-button>-->
        <!--</el-form-item>-->
      </el-form>
      <el-table style="width: 100%" :data="questionListForPaper">

        <el-table-column
          prop="paper_question_sort"
          width="80"
          label="序号">
        </el-table-column>

        <el-table-column
          prop="content"
          :show-overflow-tooltip="true"
          label="试题内容"
          min-width="150">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>

        <el-table-column
          prop="question_type"
          label="试题类型"
          width="100">
          <template slot-scope="scope">
            <el-tag size="small" >{{scope.row.question_type | getQuestionTypeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="subject_name"
          label="科目"
          width="120">
        </el-table-column>

        <el-table-column
          prop="mark"
          label="分数"
          width="120">
        </el-table-column>


        <el-table-column
          prop="grade_type"
          width="120"
          label="年级">
          <template slot-scope="scope">
            <el-tag size="small">{{scope.row.grade_type | getGradeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="250"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="updateMark(scope.row)"
              type="warning">设置分数</el-button>

            <el-button
              size="small"
              @click="updateSort(scope.row)"
              type="warning">排序</el-button>

            <el-button
              size="small"
              @click="deleteQuestionForPaper(scope.row)"
              type="danger">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </el-dialog>

    <!-- 所有试题列表 -->
    <el-dialog width="70%"   title="试题导入" :visible.sync="questionDialog">
      <el-form :inline="true">
        <el-form-item>
          <el-select
            @change="changeQuestionTypeByList"
            v-model="questionType"
            filterable
            clearable
            placeholder="试题类型">
            <el-option
              v-for="item in questionTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table @selection-change="questionHandleSelectionChange" :data="questionList">
        <el-table-column
          type="selection"
          align="center"
          width="50">
        </el-table-column>

        <el-table-column
          prop="content"
          :show-overflow-tooltip="true"
          label="内容"
          min-width="150">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>

        <el-table-column
          prop="question_type"
          label="试题类型"
          width="100">
          <template slot-scope="scope">
            <el-tag size="small" >{{scope.row.question_type | getQuestionTypeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="subject_name"
          label="科目"
          width="120">
        </el-table-column>

       <!-- <el-table-column
          prop="mark"
          label="分数"
          width="120">
        </el-table-column>-->

        <el-table-column
          prop="school_type"
          width="120"
          label="阶段">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.school_type === 1" size="small">小学</el-tag>
            <el-tag v-else-if="scope.row.school_type === 2" size="small">初中</el-tag>
            <el-tag v-else-if="scope.row.school_type === 3" size="small">高中</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="grade_type"
          width="120"
          label="年级">
          <template slot-scope="scope">
            <el-tag size="small">{{scope.row.grade_type | getGradeName}}</el-tag>
          </template>
        </el-table-column>

        <!--<el-table-column
          align="center"
          width="250"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              @click="updateMark(scope.row)">修改分数</el-button>
          </template>
        </el-table-column>-->
      </el-table>

      <el-pagination
        background
        @size-change="questionHandleSize"
        @current-change="questionHandleCurrentPage"
        :current-page="questionCurrentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="questionPageSize"
        :total="questionTotalCount"
        layout="total, prev, pager, next, jumper">
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="questionDialog = false">取 消</el-button>
        <el-button @click="saveRelevanceQuestion" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getQuestionTypeListApi} from '@/utils/system-dict-api'
  let thisPage = null
  export default {
    name: 'paper-question-dialog-list',
    props: {
      showFlag: {
        type: Boolean,
        required: false,
        default: false
      },
      gradeTypeList: {
        type: Array,
        required: true,
        default () {
          return []
        }
      },

      params: {
        type: Object,
        required: true,
        default: {}
      }
    },

    watch: {
      params (val) {
        this.queryParams = val
        this.getQuestionListForPaper()
      },

      showFlag (val) {
        this.dialogVisible = val
      },

      queryLanguagePointsArrayId (val) {
        let length = val.length
        if (length > 0) {
          this.checkedLanguagePointsId = val[length - 1]
        } else {
          this.checkedLanguagePointsId = ''
        }
        this.getQuestionList()
      }
    },

    beforeCreate () {
      thisPage = this
    },

    mounted () {
      this.queryParams = this.params
      this.dialogVisible = this.showFlag
    //  this.getTreeLanguagePoints()
      this.getQuestionType()
    },

    data () {
      return {
        treeLanguagePointsList: [],
        queryLanguagePointsArrayId: [],
        questionDialog: false,
        questionTypeList: [],
        questionList: [],
        questionListForPaper: [],
        queryParams: {},
        dialogVisible: false,
        currentPage: 1,
        questionCurrentPage: 1,
        pageSize: 10,
        questionPageSize: 10,
        totalCount: 0,
        checkQuestionArray: [],
        questionType: '',
        checkDeleteQuestionIds: [],
        questionTotalCount: 0,
        checkedLanguagePointsId: ''
      }
    },

    methods: {
      closeQuestionDialog () {
        this.dialogVisible = false
        this.$emit('closeDialog')
      },

      // 选择知识点
      // changeLanguagePoints (val) {
      //   let length = val.length
      //   if (length > 0) {
      //     this.checkedLanguagePointsId = val[length - 1]
      //   }
      //   this.getQuestionList()
      // },
      updateSort (item) {
        let that = this
        that.$prompt('请输入排序', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]{1}[0-9]{0,2}$/,
          inputValue: item.paper_question_sort,
          inputErrorMessage: '非法数字,请输入大于0的整数'
        }).then(({ value }) => {
          item.sort = value
          item.testPaperInfoId = that.queryParams.id
          item.questionInfoId = item.id
          that.axios.post(that.$http.httpUrl('/system/testPaper/updateQuestionSort'), item).then(function (response) {
            if (response.data.code === 1) {
              that.$message.success(response.data.message)
              that.getQuestionListForPaper()
            } else {
              that.$message.error(response.data.message)
            }
          })
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },

      updateMark (item) {
        let that = this
        that.$prompt('请输入试题分数', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]{1}[0-9]{0,2}$/,
          inputValue: item.mark,
          inputErrorMessage: '非法数字,请输入大于0的整数'
        }).then(({ value }) => {
          item.mark = value
          item.testPaperInfoId = that.queryParams.id
          item.questionInfoId = item.id
          that.axios.post(that.$http.httpUrl('/system/testPaper/updateQuestionMark'), item).then(function (response) {
            if (response.data.code === 1) {
              that.$message.success(response.data.message)
              that.getQuestionListForPaper()
            } else {
              that.$message.error(response.data.message)
            }
          })
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },

      getTreeLanguagePoints () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/languagePoints'), {
          params: {
            sqlId: 'language.points.treeList'
          }
        }).then(function (response) {
          that.treeLanguagePointsList = response.data
        })
      },

      deleteQuestionForPaper (item) {
        let that = this
        that.checkDeleteQuestionIds.push(item.id)
        let params = {
          testPaperInfoId: that.queryParams.id,
          questionIds: that.checkDeleteQuestionIds
        }
        that.$confirm('确定移除选中的试题吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          that.axios.delete(that.$http.httpUrl('/system/testPaper/deleteQuestionForPaper'), {
            data: params
          }).then(function (response) {
            if (response.data.code === 1) {
              that.$message({
                type: 'success',
                message: response.data.message
              })
              that.checkDeleteQuestionIds = []
              that.getQuestionListForPaper()
            } else {
              that.$message({
                type: 'error',
                message: response.data.message
              })
            }
          })
        })
      },

      questionHandleSelectionChange (val) {
        this.checkQuestionArray = val
      },

      addQuestion () {
        this.getQuestionList()
        this.questionDialog = true
      },

      getQuestionType () {
        let that = this
        getQuestionTypeListApi(function (data) {
          that.questionTypeList = data
        })
      },

      questionHandleSize (val) {
        this.questionCurrentPage = 1
        this.questionPageSize = val
        this.getQuestionList()
      },

      questionHandleCurrentPage (val) {
        this.questionCurrentPage = val
        this.getQuestionList()
      },

      // 获取试卷关联试题列表
      getQuestionListForPaper () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/testPaper/getPaperQuestionList'), {
          params: {
            questionType: that.queryParams.questionType,
            testPaperInfoId: that.queryParams.id,
            currentPage: that.currentPage,
            offset: (that.currentPage - 1) * that.pageSize,
            limit: that.pageSize
          }
        }).then(function (response) {
          that.questionListForPaper = response.data.data.dataList
          that.totalCount = response.data.data.total
        }).catch(function (error) {
          console.log(error)
        })
      },

      getQuestionList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/question'), {
          params: {
            currentPage: that.questionCurrentPage,
            offset: (that.questionCurrentPage - 1) * that.questionPageSize,
            limit: that.questionPageSize,
            questionType: that.questionType,
            schoolType: that.queryParams.school_type,
            gradeType: that.queryParams.grade_type,
            subjectId: that.queryParams.subject_id,
            category: 2
          }
        }).then(function (response) {
          that.questionList = response.data.data.dataList
          that.questionTotalCount = response.data.data.total
        }).catch(function (error) {
          console.log(error)
        })
      },

      handleSizeChange (val) {
        this.pageSize = val
        this.currentPage = 1
        this.getQuestionListForPaper()
      },

      handleCurrentChange (val) {
        this.currentPage = val
        this.getQuestionListForPaper()
      },

      changeQuestionType (val) {
        this.queryParams.questionType = val
        this.getQuestionListForPaper()
      },

      changeQuestionTypeByList (val) {
        this.questionType = val
        this.getQuestionList()
      },

      /**
       * 保存关联试题
       */
      saveRelevanceQuestion () {
        let that = this
        if (that.checkQuestionArray.length === 0) {
          that.$message.error('请选择试题')
        } else {
          let marks = []
          let checkQuestionIds = []
          that.checkQuestionArray.forEach(function (question) {
            checkQuestionIds.push(question.id)
            marks.push(parseInt(question.mark))
          })
          let params = {
            testPaperInfoId: that.queryParams.id,
            questionIds: checkQuestionIds,
            marks: marks
          }

          that.axios.post(that.$http.httpUrl('/system/testPaper/relevanceQuestion'), params)
            .then(function (response) {
              if (response.data.code === 1) {
                that.questionDialog = false
                that.$message.success(response.data.message)
                that.getQuestionListForPaper()
              } else {
                that.$message.error(response.data.message)
              }
            }).catch(function (error) {
              console.log(error)
            })
        }
      }
    },
    filters: {
      getGradeName (gradeType) {
        for (let i = 0; i < thisPage.gradeTypeList.length; i++) {
          if (thisPage.gradeTypeList[i].code === gradeType) {
            return thisPage.gradeTypeList[i].value
          }
        }
        return '无'
      },

      getQuestionTypeName (questionType) {
        for (let i = 0; i < thisPage.questionTypeList.length; i++) {
          if (thisPage.questionTypeList[i].code === questionType) {
            return thisPage.questionTypeList[i].value
          }
        }
      }
    }
  }
</script>

<style>
</style>
